<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .center-box {
        height: 500px;
        display: flex;
        border: 1px solid #ff55dd;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
      }
    </style>
    <!-- 
        node.js(把电脑放到谷歌浏览器环境中)
        win+r --》cmd--》node -v
        npm相当于迅雷，用来下载东西的，官话：npm是包管理器
        npm是属于node软件的

        
     -->
  </head>
  <body>
    <!-- v-model 数据双向绑定的指令：用在表单元素上 -->
    <div class="center-box">
      <h1>绝对居中</h1>
    </div>
    <div id="app">
      <!-- <input type="text" placeholder="输入内容" v-model="value" />
      <div>
        <h2 v-text="`$`+value"></h2>
        <h3 v-text="`$`+value"></h3>
        <h4 v-text="`$`+value"></h4>
      </div>-->
      <input type="text" v-on:input="handleChange" />
      <div>
        <h2>{{ value }}</h2>
      </div>
      <!-- flex布局 -->
      <div style="display: flex">
        <div style="border: 1px solid #b11cc5">左侧</div>
        <div style="border: 1px solid #219c59">右侧</div>
      </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          value: "某宝",
        },
        methods: {
          handleChange(event) {
            //做额外的事情
            this.value = event.target.value;
            // console.log(event.target.value);
          },
        },
      });
    </script>
  </body>
</html>
